<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/style.css" />

    <style>
      .chart {
        /* width: 600px; */
        /* height: 600px; */
      }
    </style>
  </head>
  <body>
    <canvas id="container" width="500" height="500" class="chart">
    </canvas>
    
    <script src="./js/ec/echarts.min.js"></script>
    <script src="./js/ec/echarts-liquidfill.min.js"></script>
    <!-- <script src="./js/data-set.min.js"></script> -->
    <!-- <script src="./js/app.js"></script> -->
    <script>
var myChart = echarts.init(document.getElementById('container'));
var option  = {
    series: []

};

var obj = {
        type: 'liquidFill',
        radius: '50%',
        data: [0.6],
        color: 'rgba(67,209,100,1)',
        label: {
            normal: {
                color: '#fff',
                insideColor: 'transparent',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bold',
                    fontFamily: 'Microsoft YaHei'
                }
            }
        },
        outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
                borderColor: 'rgba(67,209,100,1)',
                borderWidth: 2
            }
        },
        backgroundStyle: {
            color: 'rgba(67,209,100,.3)'
        }
    }
setInterval(function(){
  obj.data[0] = Math.random()
  myChart.setOption({series:[obj]});
},100)


    </script>
  </body>
</html>
